<template>
  <div class="account" ref="accountRef">
    <!-- 标题区域 -->
    <van-sticky>
      <header-component
          :title="data.title"
          :showPre="true"
          :titleSlide="titleSlide"
      />
    </van-sticky>
    <!-- 主体内容区 -->
    <section class="content">
      <div class="upgrade">
        <div class="text">
          <h2>升级为Ybox Pro</h2>
          <p>您是Ybox基础用户，升级后可获得完整的Cubox使用体验</p>
          <a href="#">点击了解</a>
        </div>
        <section>
          <div class="shadow"></div>
          <div class="bowl">
            <div class="liquid"></div>
          </div>
        </section>
      </div>
      <!-- 已使用容量 -->
      <div class="capacity">
        <div>
          <span>已使用容量</span>
          <span v-text="`195/220`"></span>
        </div>
        <van-progress
            :show-pivot="false"
            color="#6943db"
            stroke-width="10px"
            percentage="97.5"
        />
      </div>
      <!-- 会员奖励 -->
      <tagList class="tag-list" :content="data.vipMsg"/>
      <!-- 用户信息 -->
      <tagList class="tag-list" :showRightSlot="true" :showRightArrow="false" :content="data.UserData"
               :showRightButton="true">
        <template #rightSlot="props">
          <van-button @click="handleOperate(props.item)" v-text="props.item.value" type="primary" size="mini"></van-button>
        </template>
        <template #more="props">
          <operate-box :is-show="useOperatorBoxStore().isShowOverlay" @handleClose="handleClose">
            <collect-edit v-if="useOperatorBoxStore().showOverlayType==='updateUserInfo'"
                          :editTitle="updateTitle"
                          :showIconColor="false"
                          :showTagColor="false"
                          :showIconSelect="false"
                          :showTag="false"
                          :showTagModel="false"
                          :showTagBgColor="false"
                          :nameTips="updateTip"
                          @submit="handleSubmit"
                          :showTagNameField="false">
            </collect-edit>
          </operate-box>
        </template>
      </tagList>
      <!-- 退出登录 -->
      <div class="operaBox" @click="logOut">退出登录</div>
      <!-- 删除用户 -->
      <div class="operaBox">删除用户</div>
    </section>
  </div>
</template>

<script setup>
import {ref, watch, reactive, toRaw} from "vue";
import headerComponent from "@/components/header/index.vue";
import tagList from "@/components/list/tagList.vue";
import useScroll from "@/hooks/useScroll";
import {setToken} from "@/utils/auth.js";
import useUserStore from "@/stores/modules/user.js";
import {showConfirmDialog, showDialog, showToast} from "vant";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";
import CollectEdit from "@/components/operateBox/collectEdit.vue";
import strinigUtils from "@/utils/stringUtils.js";
import useCollectEditStore from "@/stores/modules/collectEdit.js";
import {addCollect, updateCollect} from "@/api/app/app.js";
import {getUserProfile, updateUserProfile} from "@/api/system/user.js";

const data = new reactive({
  title: "我的账户",
  vipMsg: [
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "会员奖励",
      totalNum: '',
      value: "",
      info: "输入推荐码，获赠会员",
    },
  ],
  UserData: [
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "用户名",
      totalNum: '',
      value: "修改",
      info: useUserStore().user.nickName,
    },
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "邮箱",
      totalNum: '',
      value: "修改",
      info: useUserStore().user.email,
    },
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "手机",
      totalNum: '',
      value: "修改",
      info: useUserStore().user.phonenumber || "未绑定",
    },
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "微信",
      totalNum: '',
      value: "修改",
      info: useUserStore().user.weichatNo || "未绑定",
    },
    {
      url: "/account",
      icon: "",
      iconColor: "#2F80ED",
      name: "微博",
      totalNum: '',
      value: "修改",
      info: useUserStore().user.weibotNo || "未绑定",
    },
  ],
});

const updateTitle = ref("")
const updateTip = ref("")

/** 退出登录 */
const logOut = () => {
  showConfirmDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
  }).then(() => {
      // on close
      useUserStore().logOut().then(res => {
        location.href = '/index';
      })
    }).catch(() => {
      // on cancel
    });

}

/** 关闭遮罩层 */
const handleClose = (value) => {
  // console.log(value)
  useOperatorBoxStore().setIsShowOverlay(false)
}

/** 打开收藏夹操作菜单 */
const handleOperate = (value) => {
  updateTitle.value = "修改" + value.name
  updateTip.value = value.info
  // 1. 点击操作按钮，先给当前collect赋值
  // currentCollect.value = value
  // 2. 赋值后显示
  useOperatorBoxStore().showOverlay(true, 'updateUserInfo');
};

/** 更新用户信息 */
function handleSubmit() {
  if (strinigUtils.isEmpty(useCollectEditStore().content.name)) {
    // 条件不满足(无输入内容)
    useOperatorBoxStore().setIsShowOverlay(false);
    return
  } else {
    console.debug(useCollectEditStore().content.name)

    let title = updateTitle.value.slice(2)
    let data = {}
    if ('用户名' == title){
      data.nickName = useCollectEditStore().content.name
    }else if('邮箱' == title){
      data.email = useCollectEditStore().content.name
    }else if('手机' == title){
      data.phonenumber = useCollectEditStore().content.name
    }else if('微信' == title){
      data.weiChatNo = useCollectEditStore().content.name
    }else if('微博' == title){
      data.weiboNo = useCollectEditStore().content.name
    }else {
      showToast("错误")
      return;
    }
    updateUserProfile(data).then(res => {
      useOperatorBoxStore().setIsShowOverlay(false);
      showToast("修改成功，返回上一页刷新");
      // 清空信息
      useCollectEditStore().content.name = ''
    })

  }
}


/** 标题动画相关的操作 */
const accountRef = ref();
let {scrollTop} = useScroll(accountRef);
let titleSlide = ref(0);
watch(scrollTop, (newValue, oldValue) => {
  // console.log("watch 已触发", newValue);
  // -1 下拉 0什么都不做 1上拉
  if (newValue > oldValue && newValue > 9.6) {
    // 执行动画
    titleSlide.value = 1;
  } else if (newValue < oldValue && newValue <= 9.6) {
    titleSlide.value = -1;
  }
});

</script>

<style lang="less" scoped>
.account {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;

  section.content {
    padding: 0 12px;
    position: relative;
    top: 8%;
  }

  .upgrade {
    width: 100%;
    height: 120px;
    background: linear-gradient(25deg, #3e3ee8, #6943db, #915eee);
    border-radius: 10px;
    position: relative;
    top: 10%;
    display: flex;
    justify-content: space-between;

    .text {
      width: 48%;
      position: relative;
      left: 20px;
      color: #fff;
      // font-family: var(--primary-font-family);
      h2 {
        position: relative;
        top: 10px;
        font-size: 0.9em;
      }

      p {
        position: relative;
        top: 30px;
        font-size: 0.6em;
        color: #ddd;
      }

      a {
        position: relative;
        top: 50px;
        color: #ddd;
        font-size: 0.5em;
      }
    }

    section {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: #121212;
    }

    .bowl {
      position: relative;
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border: 8px solid transparent;
      transform-origin: bottom center;
      animation: animate 5s linear infinite;
      -webkit-animation: animate 5s linear infinite;
    }

    .bowl::before {
      content: "";
      position: absolute;
      top: -25%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      width: 40%;
      height: 15px;
      border: 8px solid #555;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      box-shadow: 0 4px #333;
    }

    .bowl::after {
      content: "";
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      border-radius: 50%;
      width: 26px;
      height: 16px;
      background: rgba(255, 255, 255, 0.05);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
    }

    @keyframes animate {
      0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        filter: hue-rotate(0deg);
        -webkit-filter: hue-rotate(0deg);
      }
      25% {
        transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
      }
      50% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      75% {
        transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
      }
      100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        filter: hue-rotate(360deg);
        -webkit-filter: hue-rotate(360deg);
      }
    }

    .liquid {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      bottom: 0;
      background: #41c1fb;
      border-bottom-left-radius: 150px;
      border-bottom-right-radius: 150px;
      filter: drop-shadow(0 0 80px #41c1fb);
      -webkit-filter: drop-shadow(0 0 80px #41c1fb);
      animation: animateLiquid 5s linear infinite;
      -webkit-animation: animateLiquid 5s linear infinite;
      transform-origin: top center;
    }

    @keyframes animateLiquid {
      0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      25% {
        transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
      }
      50% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
      75% {
        transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20deg);
      }
      100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
      }
    }

    .liquid::before {
      content: "";
      position: absolute;
      top: -10px;
      width: 100%;
      height: 20px;
      background: #1fa4e0;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      filter: drop-shadow(0 0 80px #41c1fb);
      -webkit-filter: drop-shadow(0 0 80px #41c1fb);
    }

    .shadow {
      position: absolute;
      top: calc(50% + 30px);
      left: 72%;
      transform: translate(-50%, -50%);
      width: 55px;
      height: 26px;
      background: rgba(0, 0, 0, 0.15);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      animation: animationShadow 5s linear infinite;
      -webkit-animation: animationShadow 5s linear infinite;
    }

    @keyframes animationShadow {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-10%);
      }
      50% {
        transform: translateX(0);
      }
      75% {
        transform: translateX(10%);
      }
      100% {
        transform: translateX(0);
      }
    }
  }

  .capacity {
    width: 94%;
    height: 38px;
    position: relative;
    top: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      span:nth-of-type(1) {
        font-size: 0.9em;
        font-weight: var(--primary-font-weight);
      }
    }
  }

  .tag-list {
    position: relative;
    top: 10px;
  }

  .operaBox {
    width: 100%;
    height: 38px;
    position: relative;
    top: 15px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 38px;
    color: #2196f3;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
  }

  .operaBox:nth-last-of-type(1) {
    margin-top: 10px;
    color: #f44336;
    font-family: var(--primary-font-family);
  }
}

.account::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
</style>
